<template>
  <div class="approvalStyle">
    <a-table
      style="margin-top: 20px; background: #fff"
      :columns="columns"
      :dataSource="dataSource"
      :customRow="customRow"
      bordered
    >
    </a-table>
  </div>
</template>

<script>
import { Table } from 'ant-design-vue';
import { reactive } from '@vue/reactivity';

export default {
  name: 'JMapApprovalMessage',
  components: {
    [Table.name]: Table
  },
  data() {
    return {
      columns: [
        {
          dataIndex: 'name',
          title: 'name'
        },
        {
          dataIndex: 'address',
          title: 'address'
        },
        {
          dataIndex: 'age',
          title: 'age'
        }
      ]
    };
  },
  setup() {
    let change1 = null; // 源目标数据序号
    let change2 = null; // 目标数据序号
    let dataSource = reactive([
      {
        name: '张三',
        age: 14,
        address: '北京',
        key: 3
      },
      {
        name: '李四',
        age: 15,
        address: '南京',
        key: 2
      },
      {
        name: '王五',
        age: 16,
        address: '东京',
        key: 1
      }
    ]);
    function customRow(record, index) {
      return {
        props: {
          // draggable: 'true'
        },
        style: {
          cursor: 'pointer'
        },
        // 鼠标移入
        onMouseenter: (event) => {
          // 兼容IE
          var ev = event || window.event;
          ev.target.draggable = true;
          ev.target.resize = 'horizontal';
          console.log(ev.target);
        },
        // 开始拖拽
        onDragstart: (event) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到源目标数据序号
          change1 = index;
          console.log(record, index, 'source');
        },
        // 拖动元素经过的元素
        onDragover: (event) => {
          // 兼容 IE
          var ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
        },
        // 鼠标松开
        onDrop: (event) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到目标数据序号
          change2 = index;
          [dataSource[change1], dataSource[change2]] = [
            dataSource[change2],
            dataSource[change1]
          ];
          console.log(record, index, 'target');
        }
      };
    }
    return {
      dataSource,
      customRow
    };
  }
};
</script>

<style lang="less" scoped>
.approvalStyle {
  width: 800px;
  padding-top: 100px;
  margin: 0 auto;
  .listStyle {
    font-size: 16px;
    padding: 20px;
    background: #fff;
    width: 300px;
    border: 1px solid #efefef;
  }
}
</style>
